<template>
  <div class="temporary-task-wrap">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" @submit.native.prevent>
      <el-form-item v-if="$store.state.userinfo.isMuilUnitUser === 1">
        <el-select filterable @change="getTable(1)" v-model="searchForm.orgIds" placeholder="请选择业主单位">
          <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
          <el-option
            v-for="item in orgOptions"
            :key="item.organizationId"
            :label="item.shortName"
            :value="item.organizationId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchForm.time"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="util.intTimePickerOptions()"
          @change="getTable(1)"
        ></el-date-picker>
      </el-form-item>
      <!-- <el-form-item  label="状态：">
                <el-select filterable @change="getTable(1)" v-model="searchForm.status">
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="进行中" value="1"></el-option>
                    <el-option label="审核中" value="2"></el-option>
                    <el-option label="已完成" value="3"></el-option>
                    <el-option label="已过期" value="4"></el-option>
                    <el-option label="已撤回" value="5"></el-option>
                </el-select>
      </el-form-item>-->
      <el-form-item>
        <el-input
          v-model="searchForm.content"
          auto-complete="off"
          placeholder="请输入搜索内容"
          @keyup.enter.native="getTable(1)"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="form-search-btn" type="primary" @click="getTable(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
      <el-col :span="4">
        <div class="item-wrap" @click="searchForm.status='0'" :class="searchForm.status==0 ? 'active' : ''">
          <div class="item-content">
            <p
              class="item-value color-8"
            >{{ headerStatis.processCount + headerStatis.examCount + headerStatis.finishCount + headerStatis.outDateCount + headerStatis.recallCount }}</p>
            <p class="item-title">任务总数</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item-wrap" @click="searchForm.status='1'" :class="searchForm.status==1 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-4">{{ headerStatis.processCount }}</p>
            <p class="item-title">进行中</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item-wrap" @click="searchForm.status='2'" :class="searchForm.status==2 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-6">{{ headerStatis.examCount}}</p>
            <p class="item-title">审核中</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item-wrap" @click="searchForm.status='3'" :class="searchForm.status==3 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-3">{{ headerStatis.finishCount}}</p>
            <p class="item-title">已完成</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item-wrap" @click="searchForm.status='4'" :class="searchForm.status==4 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-1">{{ headerStatis.outDateCount }}</p>
            <p class="item-title">已过期</p>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="item-wrap" @click="searchForm.status='5'" :class="searchForm.status==5 ? 'active' : ''">
          <div class="item-content">
            <p class="item-value color-5">{{ headerStatis.recallCount }}</p>
            <p class="item-title">已撤回</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="tableData" ref="mainTable" style="width: 100%">
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column v-if="$store.state.userinfo.isMuilUnitUser === 1" prop="orgName" width="200" label="请选择单位"></el-table-column>
      <el-table-column prop="content" label="临时任务内容" width="200"></el-table-column>
      <el-table-column width="100" label="状态">
        <template slot-scope="scope">
          <div :class="statusClassMap(scope.row.status)">{{ statusMap(scope.row.status) }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column prop="dutyManName" label="主要负责人"></el-table-column>
      <el-table-column prop="partManName" label="参与人"></el-table-column>
      <el-table-column prop="tellManName" label="知会人"></el-table-column>
      <el-table-column prop="verifyManName" label="审核人"></el-table-column>
      <el-table-column prop="endtime" label="截止时间" width="200"></el-table-column>
      <el-table-column prop="updateTime" label="完成时间" width="200"></el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="showDetail(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1px">
        <template slot-scope="scope">
          <el-tabs type="border-card" v-model="defaultTabsName">
            <el-tab-pane name="approvalFlow">
              <span slot="label">
                <i class="el-icon-date"></i>审批流
              </span>
              <div class="maintenance-record-wrap block">
                <el-timeline>
                  <el-timeline-item
                    v-for="item in approvalFlowList[scope.row.id]"
                    :key="item.id"
                    :timestamp="item.createTime"
                    hide-timestamp
                  >
                    <template>
                      <p>{{item.createTime}}</p>
                      <p>{{item.type!=6?('由【' + item.accountName + '】'):''}}{{mapApprovalFlowType(item.type)}}</p>
                      <el-card v-if="item.picUrls !== '' || item.description !== ''">
                        <p v-if="item.picUrls !== ''">
                          <template v-for="(obj, index) in item.picUrls.split(',')">
                            <img
                              :key="index"
                              style="margin-right: 15px;"
                              v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(obj.split('.')[obj.split('.').length - 1].toLowerCase())"
                              :src="require('@/assets/images/video/video-detail.png')"
                              width="100"
                              height="100"
                              @click="$imgViewer"
                              :data-imgpreview="item.picUrls"
                              :data-imgpreviewindex="index"
                            />
                            <img
                              v-else
                              style="margin-right: 15px;"
                              :key="index"
                              :src="obj"
                              width="100"
                              height="100"
                              @click="$imgViewer"
                              :data-imgpreview="item.picUrls"
                              :data-imgpreviewindex="index"
                            />
                          </template>
                        </p>
                        <p v-if="item.description !== ''">{{item.description || '暂无描述'}}</p>
                      </el-card>
                    </template>
                  </el-timeline-item>
                </el-timeline>
                <!-- <p v-else class="no-data">暂无数据</p> -->
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="pageSizeChange"
      @current-change="pageChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import util from '@/utils/util'
import { getOrgList } from '@/api/org'
import {
  getTempTaskList,
  statTempTask,
  getTempTaskDetailList,
} from '@/api/tempTask'

export default {
  name: 'TemporaryTask',
  data() {
    return {
      util: util,
      loading: false,
      orgOptions: [],
      searchForm: {
        orgIds:
          this.$store.state.userinfo.isMuilUnitUser === 1
            ? this.$store.state.userinfo.organizationIds
            : this.$store.state.userinfo.org.id, // 业主单位
        time: '', // 创建时间
        status: '0', // 状态
        content: '', // 模糊搜索
      },
      headerStatis: {
        total: 0,
        examCount: 0,
        finishCount: 0,
        outDateCount: 0,
        processCount: 0,
        recallCount: 0,
      },
      tableData: [],
      defaultTabsName: 'approvalFlow',
      approvalFlowList: {}, // 详情信息
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  created() {
    let that = this
    // 绑定下拉框
    if (this.$store.state.userinfo.isMuilUnitUser === 1) {
      getOrgList({ queryType: 0 }).then((res) => {
        that.orgOptions = res.data
      })
    }
    that.getTable()
  },
  methods: {
    //头部统计
    getStatis() {
      let that = this
      let parames = {
        orgIds:
          that.searchForm.orgIds || this.$store.state.userinfo.organizationIds,
        status: '0', //that.searchForm.status, // 处理状态
        content: that.searchForm.content.trim(),
        startTime:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[0]
            : '',
        endTime:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[1]
            : '',
      }
      statTempTask(parames).then((res) => {
        that.headerStatis.examCount = res.data.examCount
        that.headerStatis.finishCount = res.data.finishCount
        that.headerStatis.outDateCount = res.data.outDateCount
        that.headerStatis.processCount = res.data.processCount
        that.headerStatis.recallCount = res.data.recallCount
      })
    },
    getTable(_pageIndex, _pageSize, isChangeState) {
      if (_pageIndex) {
        this.currentPage = _pageIndex
      }
      if (_pageSize) {
        this.pageSize = _pageSize
      }
      let that = this
      let parames = {
        orgIds:
          that.searchForm.orgIds || this.$store.state.userinfo.organizationIds,
        status: that.searchForm.status, // 处理状态
        content: that.searchForm.content.trim(),
        startTime:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[0]
            : '',
        endTime:
          that.searchForm.time && that.searchForm.time.length > 0
            ? that.searchForm.time[1]
            : '',
        pageIndex: that.currentPage - 1,
        pageSize: that.pageSize,
      }
      that.loading = true
      getTempTaskList(parames).then((res) => {
        that.total = res.total
        // if(!isChangeState) {
        //     that.headerStatis.total = res.total
        // }
        that.tableData = res.data
        that.loading = false
      })
      if (!isChangeState) {
        // 获取统计信息
        that.getStatis()
      }
    },
    pageSizeChange(val) {
      //页码切换
      this.getTable(1, val, true)
    },
    pageChange(val) {
      //翻页
      this.getTable(val, this.pageSize, true)
    },
    showDetail(row) {
      let that = this
      if (row && !that.approvalFlowList.hasOwnProperty(row.id)) {
        // 获取详情
        getTempTaskDetailList({ taskId: row.id }).then((res) => {
          that.$set(that.approvalFlowList, row.id, res.data)
        })
      }
      that.$refs.mainTable.toggleRowExpansion(row)
    },
    statusMap(code) {
      const statusMAP = {
        1: '进行中',
        2: '审核中',
        3: '已完成',
        4: '已过期',
        5: '已撤回',
      }
      return statusMAP[code] || '-'
    },
    statusClassMap(code) {
      const statusClassMap = {
        1: 'type-tags type-color-4',
        2: 'type-tags type-color-6',
        3: 'type-tags type-color-3',
        4: 'type-tags type-color-1',
        5: 'type-tags type-color-5',
      }
      return statusClassMap[code] || 'type-tags'
    },
    mapApprovalFlowType(code) {
      const approvalFlowMAP = {
        1: '创建',
        2: '反馈',
        3: '审核',
        4: '驳回',
        5: '撤回',
        6: '任务过期',
      }
      return approvalFlowMAP[code] || '-'
    },
  },
  watch: {
    currentStatus(val, oldVal) {
      if (val !== oldVal) {
        this.getTable(1, false, true)
      }
    },
  },
  computed: {
    currentStatus() {
      return this.searchForm.status
    },
  },
}
</script>
